<template>
	<view class="page">
    <view class="top">
      <u-swiper keyName="img" height="300px" :list="urlList" indicator indicatorMode="line" circular></u-swiper>
      <view class="topName">商品名称:{{product.name}}</view>
		  <view class="topPrice">
				<text class="price1" style="color: red;">打折前:￥{{product.oldPrice}}</text>
				<text class="price2" style="color: green;">打折后:{{product.price}}积分</text>
			</view>
		</view>
		<view class="line"></view>
    <view class="main">
			<view class="content">
        详情介绍:<rich-text  :nodes="product.introduce"></rich-text>
      </view>
		</view>
    <view class="foot">
      <view class="foot-carts">
        <uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="goCar" @buttonClick="buttonClick" />
		  </view>
        <!-- <u-popup  :show="show" :round="10" mode="bottom" @close="close" @open="open">
            <view style="height: 60px;" @click="goMy">
              <u-icon style="float: left;margin-left: 200rpx;height: 60px;line-height: 60px;" name="red-packet-fill" color="#2979ff" size="28"></u-icon>
              <view  style="text-align: center; height: 60px;line-height: 60px;">积分支付</view >
            </view>
		    </u-popup> -->
      </view>
	</view>
</template>

<script>
import { baseUrl } from "@/config";
export default {
  
	onLoad(Option){
    this.id = Option.id  
},
  onShow() {
    this.getProduct()
    this.getCarList()
	},
	data() {
		return {
    userId:0,
    isHave:0,
    carList:[],
    show: false,
    urlList:[],
    index:0,
    code:0,
    id:0,
    product:[],
    options: [
        {
					icon: 'cart',
					text: '购物车',
					info: 5
				}],
        buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				]
		};
	},

	methods: {
    getProduct(){
        uni.request({
        data: {
       id : this.id
        }, 
        url: baseUrl+'/v1/product/idSearch',
        success: (res) => {
        this.product = res.data.data[0]
        this.urlList = res.data.data[0].urlList.split(",")
        const imgRegEx = /<img.*?>/gi
        const richText =  this.product.introduce
        this.product.introduce = richText.replace(imgRegEx, (match) => {
    if (match.indexOf('max-width:') === -1) {
        return match.replace(/<img/, '<img style="max-width:100%;"');
    } else {
        return match;
    }
});



          }
        });

    },
    getCarList(){
      this.userId=uni.getStorageSync('user').data[0].userId
      uni.request({
          url: baseUrl+'/v1/car/allSearch', 
          data:{
            userId:this.userId
          },
          success:(res)=>{
            // console.log(res.data.data);
            this.carList = res.data.data
            this.options[0].info = this.carList == undefined?0:this.carList.length
            // this.$nextTick(()=>{})
            // this.$forceUpdate
          }
        })
    },
    goMy(){
      var id = this.id
      var count = 1
      var path = 'detail'
      uni.showToast({
          title: '跳转支付页面',
          duration: 1000
      });
        setTimeout(function() {
            uni.navigateTo({
              url:`/pages/shop-confirm/index?id=${id}&count=${count}&path=${path}`
          })
				}, 1500)
    },
    open() {},
    close() {
      this.show = false
    },
    goCar() {
				uni.switchTab({
          url:'/pages/car/index'
        })
			},
		buttonClick(e) {
        if(e.index == 0){
          this.getProduct()
          this.getCarList()
          if(this.carList == undefined){
              uni.request({
                url:baseUrl+"/v1/car/carAdd",
                method: 'POST',
                  header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                  },
              data: {
                userId :uni.getStorageSync('user').data[0].userId,
                className: this.product.className,
                code: this.product.code,
                id:this.product.id,
                name:this.product.name,
                img:this.product.img,
                price:this.product.price,
                count:1
              }
            })
            // this.options[0].info++
            this.getProduct()
            this.getCarList()
          }else{
              for(let i=0;i<this.carList.length;i++){
              if(this.carList[i].id == this.product.id){
                uni.showToast({
                  title: '亲,商品存在',
                  duration: 1000
                });
               
              return
              }
            }
            uni.request({
                url:baseUrl+"/v1/car/carAdd",
                method: 'POST',
                  header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                  },
              data: {
                userId :uni.getStorageSync('user').data[0].userId,
                className: this.product.className,
                code: this.product.code,
                id:this.product.id,
                name:this.product.name,
                img:this.product.img,
                price:this.product.price,
                count:1
              }
            })
            // this.carList.length++
            // this.options[0].info++
            this.getProduct()
             this.getCarList()
            
          }

          uni.showToast({
                title: '添加成功',
                duration: 1000
              });
        }else{
          var id = this.id
      var count = 1
      var path = 'detail'
      uni.showToast({
          title: '跳转支付页面',
          duration: 1000
      });
        setTimeout(function() {
            uni.navigateTo({
              url:`/pages/shop-confirm/index?id=${id}&count=${count}&path=${path}`
          })
				}, 1500)
        }
       
        
			},

	}
};
</script>

<style lang="scss" scoped>
.page{
  .top{
    .topPrice{
      height: 30px;
      .price1{
          float: left;
          margin-left: 40px;
      }
      .price2{
          float: right;
          margin-right: 40px;
      }
    }
  }

  .foot{
    .foot-carts {
		  display: flex;
		 flex-direction: column;
		 position: fixed;
		 left: 0;
		 right: 0;
		 left: var(--window-left);
		 right: var(--window-right);
		 bottom: 0;
	}
 
  }
  .line {
		height: 10rpx;
		width: 100vw;
		background: #eee;
	  }
}

</style>
